<template>
	<view class="container999" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		
		<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
		<view class='nav'>
			<!-- 导航栏 agents导航栏标题 -->
			<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
		</view>
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper style="min-height: 100vh;" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(listItem,listIndex) in list" :key="listIndex">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation
					:scroll-into-view="toView">
					<view :id="'top'+listIndex" style="width: 100%;height: 120upx;">边距盒子</view>
					<view class='content'>
						<view class='card' v-for="(item,index) in listItem" v-if="listItem.length > 0" :key="index"
							@click="toDesc(item)">
							<view class="connection">
								<view class="t1">
									<view style="letter-spacing: 1.4px;">订单状态</view>
								</view>
								<view style="color:#3da180;margin-right: 15px;">
									{{getState(item.state)}}
								</view>
							</view>
							<view class="connection">
								<view class="t1">
									<view style="letter-spacing: 1.4px;">预约时间</view>
								</view>
								<view style="margin-right: 15px; opacity: 0.5;">
									{{item.appointTime}}
								</view>
							</view>
							<view class="connection">
								<view class="t1">
									<view>预约重量</view>
								</view>
								<view style="margin-right: 15px; opacity: 0.5;">
									{{item.garbageWeight}}
								</view>
							</view>
							<view class="connection">
								<view class="t1">
									<view>预约物品</view>
								</view>
								<view style="margin-right: 15px; opacity: 0.5;">
									{{item.garbageType}}
								</view>
							</view>
							<view class="connection">
								<view class="t1">
									<view>预约地点</view>
								</view>
								<view style="margin-right: 15px; opacity: 0.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
									{{item.addressDesc}}
								</view>
							</view>
							<view class="connection">
								<view class="t1">
									<view>距离您</view>
								</view>
								<view style="margin-right: 15px; opacity: 0.5;">
									{{item.distance.distance_str}}
								</view>
							</view>
							<view class="btns connection">
								<button>查看详情</button>
								<button v-if="item.state=='0'" @click.stop="cancelOrder(item)">取消订单</button>
								<button v-if="item.state=='2'" @click.stop="agree(item)">确认回收</button>
								<button v-if="item.state=='3'" @click.stop="payOrder(item)">待结算</button>
								<button v-if="item.state=='4'">已结算</button>
							</view>
						</view>
					</view>
					<view class='noCard' v-if="listItem.length===0">
						暂无信息
					</view>
					<view style="width: 100%;height: 100upx;opacity:0;">底部占位盒子</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>

</template>

<script>
	const util = require('../../common/util.js');
	import refresh from '../../components/tablist/refresh.vue';
	import navTab from '../../components/tablist/navTab.vue';
	import tabBar4 from '../../components/tablist/tabBar4.vue';
	import {
		getDistances,
		dateUtils
	} from '../../common/utils.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters({
				userInfo: 'userInfo'
			})
		},
		components: {
			refresh,
			navTab,
			tabBar4
		},
		data() {
			return {
				promptVisible: true,
				typeMap: getApp().globalData.GarbageType,
				latitude: 33.404659,
				longitude: 115.089099,
				toView: '', //回到顶部id
				tempData: {},
				tabTitle: ['待接单', '已接单', '待结算', '已完成'], //导航栏格式 --导航栏组件
				currentTab: 0, //sweiper所在页
				pages: [0, 0, 0, 0], //第几个swiper的第几页
				list: [
					[],
					[],
					[],
					[]
				] //数据格式
			}
		},
		onShow() {
			uni.getLocation({
				success: data => {
					this.longitude = data.longitude
					this.latitude = data.latitude
					this.$api("user-center", "updateUser", {
						locationInfo: data
					})
				}
			})
			this.pages[this.currentTab] = 0
			this.searchInfo()
		},
		methods: {
			toTop() {
				this.toView = ''
				setTimeout(() => {
					this.toView = 'top' + this.currentTab
				}, 10)
			},
			changeTab(index) {
				this.currentTab = index || 0;
				this.pages[this.currentTab] = 0
			},
			// swiper 滑动
			swiperTab: function(e) {
				console.log("切换")
				var index = e.detail.current || 0 //获取索引
				this.$refs.navTab.longClick(index);
				this.searchInfo()
			},
			// 加载更多 util.throttle为防抖函数
			lower1: util.throttle(function(e) {
				console.log("下啦")
				this.searchInfo()
			}, 5000),
			// 刷新touch监听
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},
			isRefresh() {
				this.$refs.refresh.endAfter() //刷新结束调用
			},
			toDesc(data) {
				uni.navigateTo({
					url: 'order-map?id=' + data._id
				})
			},
			getState(state) {
				switch (state) {
					case 0:
						return "待回收";
						break;
					case 1:
						return "已被接单";
						break;
					case 2:
						return "回收员已到达";
						break;
					case 3:
						return "待审核结算";
						break;
					case 4:
						return "已完成";
						break;
				}
			},
			getWeightContent(weight) {
				switch (weight) {
					case "1":
						return "10-50公斤"
						break;
					case "2":
						return "50-100公斤"
						break;
					case "3":
						return "100公斤以上"
						break;
				}
			},
			async searchInfo() {
				// 根据当前的current 来加载不同的function
				uni.showLoading();
				let funName = ""
				let sendData = {}
				if (this.currentTab == 0) {
					sendData = {
						state: [0]
					}
				} else if (this.currentTab == 1) {
					sendData = {
						state: [1, 2]
					}
				} else if (this.currentTab == 2) {
					sendData = {
						state: [3]
					}
				} else if (this.currentTab == 3) {
					sendData = {
						state: [4]
					}
				}
				let res = await this.$api("recovery-order", "get", {
					...sendData,
					pageSize: 10,
					pageIndex: this.pages[this.currentTab]
				})

				let temp = res.data.map(v => {
					v.garbageType = this.typeMap[v.garbageType].name
					v.garbageWeight = this.getWeightContent(v.garbageWeight)
					v.distance = getDistances(this.latitude, this.longitude, v.addressInfo.latitude, v
						.addressInfo.longitude)
					return v
				})
				if (res) {
					let tempList = this.list
					if (this.pages[this.currentTab] == 0) {
						tempList[this.currentTab] = temp
					} else {
						tempList[this.currentTab] = tempList[this.currentTab].concat(temp)
					}
					console.log(tempList)
					this.pages[this.currentTab]++
					this.list = tempList
					this.$forceUpdate() //二维数组，开启强制渲染
					uni.hideLoading();
				}
			},
			// 客户确认回收
			agree(item) {
				this.$api("recovery-order", "upd", {
					_id: item._id,
					state: 3
				}).then(res => {
					console.log(res)
					uni.showModal({
						title: '已确认回收！',
						content: '是否给回收人员做出评价？',
						success: (re) => {
							if (re.confirm) {
								uni.navigateTo({
									url: 'myIssue?id=' + item._id
								})
							} else {
								this.pages[this.currentTab] = 0
								this.searchInfo()
							}
						}
					})
				})
			},
			async sendMsg(item) {
				console.log(this.userInfo)
				let openid = await this.$api('user-center', 'getUserOpenIdById', {
					_id: item.user_id
				})
				let {
					result
				} = await this.$api('sendSubscribeMessage', 'subscribeMessage', {
					openid: openid,
					template_id: 'aPItP2S5Ia6W5CqHD_CO2UK7A8XX2zGnHrJR9yuzKNc',
					page: 'pages/order/order-desc?id=' + item._id,
					subscribeData: {
						thing15: {
							value: this.userInfo.authentication.nickName
						},
						phone_number16: {
							value: this.userInfo.authentication.mobile
						},
						time2: {
							value: dateUtils.formatDateZh(new Date())
						},
						thing3: {
							value: item.addressDesc.substr(0, 15) + '...'
						},
						thing4: {
							value: item.val || '回收员已经确认到达。。'
						}
					}
				})
			},
			cancelOrder(item) {
				this.$api("recovery-order", "upd", {
					_id: item._id,
					state: 5
				}).then(res => {
					uni.showModal({
						title: "提示",
						content: "已取消订单！"
					})
					this.pages[this.currentTab] = 0
					this.searchInfo()
				})
			},
			//员工确认支付
			payOrder(item) {
				uni.navigateTo({
					url: 'pay-order?id=' + item._id + '&orderType=' + item.publicGive
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.btns {
		display: flex;
	}

	button {
		background-image: linear-gradient(-90deg,
				#3da180 0%,
				#62c980 100%),
			linear-gradient(#e8ecef,
				#e8ecef);
		background-blend-mode: normal,
			normal;
		border-radius: 45px;
		width: 100%;
		height: 40px;
		margin: 0px 5px;
		line-height: 40px;
		font-family: PingFangSC-Medium;
		font-size: 14px;
		letter-spacing: 0px;
		color: #ffffff;
	}

	.container999 {
		width: 100vw;
		font-size: 28upx;
		min-height: 100vh;
		overflow: hidden;
		color: #6B8082;
		position: relative;
		background-color: #FFFFFF;
	}

	.content {
		width: 100%;
	}

	.connection {
		margin: 0px auto;
		display: flex;
		width: 100%;
		height: 45px;
		line-height: 45px;
		background-color: rgba(245, 245, 245, 1);
		border-radius: 5px;
		justify-content: space-between;

		.t1 {
			text-align: center;
			width: 85px;
			line-height: 29px;
			height: 29px;
			font-family: PingFangSC-Regular;
			font-size: 14px;
			letter-spacing: 0.3px;
			color: rgba(0, 0, 0, 1);
			opacity: 0.5;
			padding-top: 16px;

			view {
				width: 85px;
				line-height: 13px;
				height: 13px;
				border-right: solid rgba(26, 26, 26, 0.3) 1px;
			}
		}

		input {
			text-align: right;
			height: 45px;
			line-height: 45px;
			width: calc(100% - 90px);
		}
	}

	.card {
		width: 90%;
		background-color: white;
		margin: 0 auto 22upx auto;
		background: #FFFFFF;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.10);
		border-radius: 5px;
		position: relative;
	}

	.noCard {
		width: 90%;
		height: 200upx;
		margin: auto;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.10);
		border-radius: 10upx;
	}


	.nav {
		position: fixed;
		left: 0;
		top: 0;
		color: white;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 24upx;
		background-color: #31b977;
		z-index: 996;
	}

	.searchInput999 {
		width: 90%;
		margin: 0 auto;
		background: white;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 56upx;
	}

	.search999 {
		width: 32upx;
		height: 32upx;
	}

	.searchBox999 {
		width: 56upx;
		height: 56upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input999 {
		color: #999;
		width: 80%;
	}
</style>
